<template>
  <div class="page">
    <navigation >{{ $t('邮箱验证') }}</navigation>
    <div class="yanzheng">
      <ul>
        <li>
          <input v-model="email" tpye="text" :placeholder="$t('请输入邮箱')" />
          <a v-if="count === 60" href="javascript:;" class="huoqu" @click="handleSendCode">{{ $t('获取验证码') }}</a>
          <span v-else class="huoqu">{{ count }}</span>
        </li>
        <li><input v-model="emailCode" tpye="text" :placeholder="$t('请输入验证码')" /></li>
        <li>
          <input v-model="password" :type="showPassword ? 'text' : 'password'" :placeholder="$t('请输入用户密码')" />
          <a href="javascript:;" @click="showPassword = !showPassword">
            <i class="iconfont" :class="showPassword ? 'icon-htmal5icon09' : 'icon-htmal5icon08'"></i>
          </a>
        </li>
        <p class="tip">{{ $t('如果长时间未接收到验证码，请查看邮箱垃圾箱内。') }}</p>
      </ul>
      <a href="javascript:;" class="wancheng" @click="send">{{ $t('完成') }}</a>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { isEmail, isPassword } from '@/utils/validate'
import navigation from '@/components/Navigation.vue'
let timerId
export default {
  components: { navigation },
  data () {
    return {
      showPassword: false,
      email: '',
      emailCode: '',
      password: '',
      loading: false,
      count: 60
    }
  },
  methods: {
    ...mapActions({
      sendEmailCode: 'auth/sendEmailCode',
      bindEmail: 'auth/bindEmail'
    }),
    resetCount () {
      this.count = 60
      clearInterval(timerId)
    },
    countdown () {
      this.resetCount()
      this.count--
      timerId = setInterval(() => {
        this.count--
        if (this.count === 0) {
          this.resetCount()
        }
      }, 1000)
    },
    handleSendCode () {
      do {
        if (this.email === '') {
          this.errmsg = this.$t('请输入邮箱')
          break
        }
        if (!isEmail(this.email)) {
          this.errmsg = this.$t('请输入正确邮箱地址')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const payload = {
        type: 3,
        email: this.email
      }
      this.sendEmailCode(payload)
        .then((data) => {
          this.countdown()
        })
    },
    send () {
      if (this.loading) { return false }
      do {
        if (this.email === '') {
          this.errmsg = this.$t('请输入邮箱')
          break
        }
        if (!isEmail(this.email)) {
          this.errmsg = this.$t('请输入正确邮箱地址')
          break
        }
        if (this.emailCode === '') {
          this.errmsg = this.$t('请输入邮箱验证码')
          break
        }
        if (!isPassword(this.password)) {
          this.errmsg = this.$t('密码由6-20个数字、26个英文字母或者下划线组成')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const payload = {
        password: this.password,
        email: this.email,
        varcode: this.emailCode
      }
      this.loading = true
      this.bindEmail(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
